<template>
    <v-app-bar
        color="surface-variant"
        scroll-behavior="inverted"
    >
        <template v-slot:prepend>
            &nbsp;
            <v-icon>mdi-cloud-outline</v-icon>
        </template>
        <v-app-bar-title>NO-CODE</v-app-bar-title>
        <v-tooltip location="bottom" :disabled="design.functionIsOk">
            <template v-slot:activator="{ props }">
                <v-tabs
                    v-model="tab"
                    v-bind="props"
                    :style="{ cursor: !design.functionIsOk ? 'not-allowed' : 'default'}"
                >
                    <v-tab
                        v-for="item in items"
                        :key="item.name"
                        :value="item.name"
                        :disabled="!design.functionIsOk"
                    >
                        {{ item.EN }}
                    </v-tab>
                </v-tabs> </template
            >函数正在执行，暂时无法操作，请稍等...
        </v-tooltip>
        <v-spacer></v-spacer>
        <v-btn
            v-if="is_auth"
            icon
        >
            <v-avatar @click="tab = 'profile'">
                <v-img
                    alt="Avatar"
                    :src="'http://localhost:8080/api/picture/?id=' + User.id"
                ></v-img
            ></v-avatar>
        </v-btn>

        <v-btn
            v-if="is_auth"
            @click="logout"
        >
            Logout
            <v-icon>mdi-logout</v-icon>
        </v-btn>

        <v-btn
            v-if="!is_auth"
            @click="toLogin"
        >
            Sign in
            <v-icon>mdi-login</v-icon>
        </v-btn>
    </v-app-bar>
</template>
<script setup>
import { ref, watch, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from '../stores/user'
import { useDesignStore } from '../stores/design'

const User = useUserStore()
const design = useDesignStore()
const is_auth = computed(() => User.is_auth)
const router = useRouter()
const route = useRoute()
const fullpath = computed(() => route.fullPath)
const tab = ref('')
const items = ref([])
const guestRoutes = [
    {
        EN: 'home',
        name: 'home'
    }
]

const clientRoutes = [
    {
        EN: 'home',
        name: 'home'
    },
    {
        EN: 'manage',
        name: 'manage'
    },
    {
        EN: 'design',
        name: 'design'
    },
    {
        EN: 'profile',
        name: 'profile'
    }
]

reloadRoutes()

function reloadRoutes() {
    tab.value = ''
    if (User.is_auth) {
        items.value = clientRoutes
    } else {
        items.value = guestRoutes
    }
    // check initial tab
    items.value.forEach((item) => {
        if (location.hash.includes(item.name)) {
            tab.value = item.name
        }
    })
}

// watch tab
watch(tab, () => {
    router.push({
        name: tab.value
    })
})

watch(is_auth, () => {
    reloadRoutes()
})

watch(fullpath, () => {
    reloadRoutes()
})

function logout() {
    User.logout(() => {
        router.push({
            name: 'home'
        })
    })
}

function toLogin() {
    router.push({
        name: 'login'
    })
}
</script>
